import { lazy, Suspense } from "react";
import {
  HashRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";

// 引入加载中的 组件
import Loading from "@/components/Loading";

// import NotFound from "./pages/NotFound";
// import Layout from "@/pages/Layout";
// import Login from "@/pages/Login";

// 引入 权限路由组件
import AuthRoute from "@/components/AuthRoute";

// 1 修改引入路由的代码写法 用上 lazy
const Layout = lazy(() => import("@/pages/Layout"));
const Login = lazy(() => import("@/pages/Login"));
const NotFound = lazy(() => import("@/pages/NotFound"));
const Article = lazy(() => import("@/pages/Article"));
const Chat = lazy(() => import("@/pages/Profile/Chat"));
const ProfileEdit = lazy(() => import("@/pages/Profile/Edit"));
const ProfileFeedback = lazy(() => import("@/pages/Profile/Feedback"));
const Search = lazy(() => import("@/pages/Search"));
const Result = lazy(() => import("@/pages/Search/Result"));

export default function App() {
  return (
    <div>
      <Router>
        {/* 2 设置加载路由页面过程 加载提示 */}
        {/* fallback 接收一个组件 负责在 页面切换到时候 显示 安抚用户 */}
        <Suspense fallback={<Loading />}>
          <Switch>
            <Redirect exact path="/" to="/layout" />
            <Route path="/layout" component={Layout} />
            <Route path="/login" component={Login} />
            {/* 不使用 tab 布局的界面 */}
            <Route path="/login" component={Login} />
            <Route path="/search" component={Search} />
            <Route path="/article/:id" component={Article} />
            <Route path="/search/result" component={Result} />

            {/* 以下都是登录后才能访问 */}
            <AuthRoute path="/profile/edit" component={ProfileEdit} />
            <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
            <AuthRoute path="/profile/chat" component={Chat} />
            {/* 404 */}
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </Router>
    </div>
  );
}
